<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
    <!-- 
				常用的生命周期钩子：
						1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
						2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

				关于销毁Vue实例
						1.销毁后借助Vue开发者工具看不到任何信息。
						2.销毁后自定义事件会失效，但原生DOM事件依然有效。
						3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
		-->
<body>
    <div id="app">
        <div><h1>{{n}}</h1>
            <!-- vm销毁后，原生dom事件不会被销毁，自定义事件被销毁 -->
        <button @click="add">点我n++</button></div>  
        <button @click="bye">点销毁vm</button></div>
    </div>
    <script>
        Vue.config.productionTip = false
        var v = new Vue({
            el: '#app',
            data: {
                n: 1
            },
            methods: {
                add() {
                    this.n++
                    console.log("add");
                },
                bye(){
                    v.$destroy();
                }
            },
            beforeCreate() {
                console.log('beforecreate');
                // console.log(this);
                // debugger;   为程序设立断点
            },
            created() {
                console.log('create');
                // console.log(this);
                // debugger;
            },
            beforeMount() {
                console.log('beforeMount');
                // debugger
            },
            mounted() {
                console.log('mounted');
                // console.log(this);
            },
            beforeUpdate() {
                console.log("beforeUpdate");
                console.log(this.n);
                // debugger;
            },
            updated() {
                console.log("updated")
                // this.n=99;
            }, 
            beforeDestroy() {
                console.log('beforeDestroy')
                this.add();

            },
        })
    </script>
</body>

</html>